Chromeで(いわゆる)スーパーリロードとキャッシュクリアを少しでも楽に行いたい
やりたいこと
Web開発において、コンテンツをサーバ側にアップロードしてリロードしたにも関わらず、ブラウザに反映されないことがあります。 確実に反映させるために、以下の手順を実施していました。
- ブラウザ(Chrome)のローカルキャッシュをクリア
- スーパーリロードを実施して、キャッシュ設定状態によらず、サーバからコンテンツをダウンロード
Ctrl(macOSの場合 Command) + Shift + R
この手順が少しでも楽にならないかと思い、調べてみました。
環境
- macOS Catalina 10.15.6
- Chrome 84.0.4147.125
Chrome デベロッパーツールを使う場合
上記のページの通りなのですが、Chrome デベロッパーツールを開いている時限定で、
ブラウザの再読み込みボタン上で右クリックする(もしくは左クリックし続ける)と現れるメニューから
キャッシュの消去とハード再読み込み を選択すると実行されます。
Chrome拡張を使う場合
デベロッパーツールを起動していない状態でも実施したい場合は、Chrome 拡張を使うことも出来ます。
追加されたアイコンを左クリックするか、ショートカットの Ctrl + Shift + E を入力すると実行されます。
私の macOS 環境は Ctrl を Command に置き換えているため、ショートカットの設定を Command + Shift + E に変更しました。
上記でも更新されない
開発中に、上記の対応でもキャッシュクリアされず、昔のコンテンツが表示されてしまうことがありました。
色々調べた結果、Vue CLI で PWA (Progressive Web Apps) を有効にしたプロジェクトが Cache Storage にキャッシュされたコンテンツを表示するようになっていました。
プロジェクト状況を確認したところ PWA 対応は意図したものでは無かったので、以下のページを参考に差分となるライブラリを削除し、ソースを修正しました。
また、ブラウザ側の対応として、デベロッパーツールの Application - Cache - Cache Storage の該当部分を削除し、Application - Service Workers の該当部分を Unregister しました。
最後に
ちょっとした事ではありますが、開発中に頻発する作業だったので、効率が上がったのが嬉しいです。 同じように悩んでいる方の一助になれば幸いです。
